<ul nz-menu nzMode="horizontal" align="center">
  <a routerLink="/home">movielens</a>
  <li nz-submenu nzTitle="快速链接">
    <ul>
      <li nz-menu-group nzTitle="Item 1">
        <ul>
          <li nz-menu-item>Option 1</li>
          <li nz-menu-item>Option 2</li>
        </ul>
      </li>
      <li nz-menu-group nzTitle="Item 2">
        <ul>
          <li nz-menu-item>Option 3</li>
          <li nz-menu-item>Option 4</li>
          <li nz-submenu nzTitle="Sub Menu">
            <ul>
              <li nz-menu-item nzDisabled>Option 5</li>
              <li nz-menu-item>Option 6</li>
            </ul>
          </li>
          <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
            <ul>
              <li nz-menu-item>Option 5</li>
              <li nz-menu-item>Option 6</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li nz-submenu nzTitle="用户空间">
    <ul>
      <li nz-menu-group nzTitle="Item 1">
        <ul>
          <li nz-menu-item>Option 1</li>
          <li nz-menu-item>Option 2</li>
        </ul>
      </li>
      <li nz-menu-group nzTitle="Item 2">
        <ul>
          <li nz-menu-item>Option 3</li>
          <li nz-menu-item>Option 4</li>
          <li nz-submenu nzTitle="Sub Menu">
            <ul>
              <li nz-menu-item nzDisabled>Option 5</li>
              <li nz-menu-item>Option 6</li>
            </ul>
          </li>
          <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
            <ul>
              <li nz-menu-item>Option 5</li>
              <li nz-menu-item>Option 6</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li nz-submenu nzTitle="影片类别">
    <ul>
      <li nz-menu-group nzTitle="Item 1">
        <ul>
          <li nz-menu-item>Option 1</li>
          <li nz-menu-item>Option 2</li>
        </ul>
      </li>
      <li nz-menu-group nzTitle="Item 2">
        <ul>
          <li nz-menu-item>Option 3</li>
          <li nz-menu-item>Option 4</li>
          <li nz-submenu nzTitle="Sub Menu">
            <ul>
              <li nz-menu-item nzDisabled>Option 5</li>
              <li nz-menu-item>Option 6</li>
            </ul>
          </li>
          <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
            <ul>
              <li nz-menu-item>Option 5</li>
              <li nz-menu-item>Option 6</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li nz-menu-item nzDisabled>
    <nz-input-group [nzSuffix]="suffixIconSearch">
      <label>
        <input type="text" nz-input placeholder="search" (keypress)="$event.which === 13?switchToExplore('content'):0"/>
      </label>
    </nz-input-group>
    <ng-template #suffixIconSearch>
      <i nz-icon nzType="search"></i>
    </ng-template>
  </li>
  <li nz-menu-item style="margin-left: 10%;">
    <i nz-icon nzType="bell" nzTheme="outline"></i>
  </li>
  <li nz-submenu nzIcon="smile">
    <ul>
      <li nz-menu-group nzTitle="个性选择">
        <ul>
          <a routerLink="/tags">
            <li nz-menu-item>用户偏好选择</li>
          </a>
          <li nz-menu-item>Option 2</li>
        </ul>
      </li>
      <li nz-menu-group nzTitle="系统选择">
        <ul>
          <a routerLink="/login">
            <li nz-menu-item>登陆</li>
          </a>
          <a routerLink="/register">
            <li nz-menu-item>注册</li>
          </a>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<div style="background: #ECECEC;padding:30px;">
  <h2>
    <i nz-icon nzType="play-circle" nzTheme="fill"></i>&nbsp;实时推荐:
  </h2>
  <div>
    <p
      nz-typography
      nzEllipsis
      nzExpandable
      [attr.title]="content"
      [nzEllipsisRows]="rows"
    >
      {{ content }}
    </p>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="4" *ngFor="let movie of movies">
      <nz-card nzHoverable [nzCover]="coverTemplate">
        <nz-card-meta nzTitle="{{movie.name}}"
                      nzDescription="{{movie.year}} | {{movie.duration}} minutes"></nz-card-meta>
        <nz-rate [(ngModel)]="movie.score" [nzTooltips]="tooltips"></nz-rate>
      </nz-card>
      <ng-template #coverTemplate>
        <img alt="{{movie.name}}" src="{{movie.imgUrl}}" height="300px"/>
      </ng-template>
    </div>
  </div>
</div>

<div style="background: #ECECEC;padding:30px;">
  <h2>
    <i nz-icon nzType="heart" nzTheme="fill"></i>&nbsp;离线推荐:
  </h2>
  <div>
    <p
      nz-typography
      nzEllipsis
      nzExpandable
      [attr.title]="offlineContent"
      [nzEllipsisRows]="rows"
    >
      {{ offlineContent }}
    </p>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="4" *ngFor="let movie of offlineMovies">
      <nz-card nzHoverable [nzCover]="coverTemplate">
        <nz-card-meta nzTitle="{{movie.name}}"
                      nzDescription="{{movie.year}} | {{movie.duration}} minutes"></nz-card-meta>
        <nz-rate [(ngModel)]="movie.score" [nzTooltips]="tooltips"></nz-rate>
      </nz-card>
      <ng-template #coverTemplate>
        <img alt="{{movie.name}}"
             src="{{movie.imgUrl}}"
             height="300px"
        />
      </ng-template>
    </div>
  </div>
</div>

<div style="background: #ECECEC;padding:30px;">
  <h2>
    <i nz-icon nzType="fire" nzTheme="fill"></i>&nbsp;热门推荐:
  </h2>
  <div>
    <p
      nz-typography
      nzEllipsis
      nzExpandable
      [attr.title]="content"
      [nzEllipsisRows]="rows"
    >
      {{ content }}
    </p>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="4" *ngFor="let movie of movies">
      <nz-card nzHoverable [nzCover]="coverTemplate">
        <nz-card-meta nzTitle="{{movie.name}}"
                      nzDescription="{{movie.year}} | {{movie.duration}} minutes"></nz-card-meta>
        <nz-rate [(ngModel)]="movie.score" [nzTooltips]="tooltips"></nz-rate>
      </nz-card>
      <ng-template #coverTemplate>
        <img alt="{{movie.name}}"
             src="{{movie.imgUrl}}"
             height="300px"
        />
      </ng-template>
    </div>
  </div>
</div>

<div style="background: #ECECEC;padding:30px;">
  <h2>
    <i nz-icon nzType="fire" nzTheme="fill"></i>&nbsp;评分最多:
  </h2>
  <div>
    <p
      nz-typography
      nzEllipsis
      nzExpandable
      [attr.title]="content"
      [nzEllipsisRows]="rows"
    >
      {{ content }}
    </p>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="4" *ngFor="let movie of movies">
      <nz-card nzHoverable [nzCover]="coverTemplate">
        <nz-card-meta nzTitle="{{movie.name}}"
                      nzDescription="{{movie.year}} | {{movie.duration}} minutes"></nz-card-meta>
        <nz-rate [(ngModel)]="movie.score" [nzTooltips]="tooltips"></nz-rate>
      </nz-card>
      <ng-template #coverTemplate>
        <img alt="{{movie.name}}"
             src="{{movie.imgUrl}}"
             height="300px"
        />
      </ng-template>
    </div>
  </div>
</div>

<div style="background: #ECECEC;padding:30px;">
  <h2>
    <i nz-icon nzType="fire" nzTheme="fill"></i>&nbsp;最新电影:
  </h2>
  <div>
    <p
      nz-typography
      nzEllipsis
      nzExpandable
      [attr.title]="content"
      [nzEllipsisRows]="rows"
    >
      {{ content }}
    </p>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="4" *ngFor="let movie of movies">
      <nz-card nzHoverable [nzCover]="coverTemplate">
        <nz-card-meta nzTitle="{{movie.name}}"
                      nzDescription="{{movie.year}} | {{movie.duration}} minutes"></nz-card-meta>
        <nz-rate [(ngModel)]="movie.score" [nzTooltips]="tooltips"></nz-rate>
      </nz-card>
      <ng-template #coverTemplate>
        <img alt="{{movie.name}}"
             src="{{movie.imgUrl}}"
             height="300px"
        />
      </ng-template>
    </div>
  </div>
</div>
